import React, { PropTypes } from 'react'

import { Form, Button, Row, Col,DatePicker, Radio} from 'antd'
const echarts = require('echarts');

class chartMonthTop extends React.Component {
  constructor (props) {
    super(props);
    this.state={
        activeGas:'So2'
    }

  }
  legend(){
    return ["CO","NO2","SO2","O3","PM2.5","PM10"]
  }
  xAxis(){
    let array=[];
    if(this.props.dataSource!=undefined){
        const self=this;

        this.props.dataSource.list.map(function(item){
            const str=item.d.split("-")
            let xaxi=""
            if(self.props.activeMenu=="month"){
                xaxi=str[0]+"年"+str[1]+"月"
            }else if(self.props.activeMenu=="quarter"){
                xaxi=str[0]+"年"+str[1]+"季度"
            }else if(self.props.activeMenu=="halfyear"){
                xaxi=str[0]+"年"
                if(str[1]==1){
                    xaxi+="上半年"
                }else{
                    xaxi+="下半年"
                }
            }else if(self.props.activeMenu=="year"){
                xaxi=str[0]+"年"
            }else{
                xaxi=item.d
            }

            array=array.concat(xaxi)
        })
    }
    return array
  }
  series(key){
    const self=this;
    let data=[];

    if(this.props.dataSource!=undefined){
        this.props.dataSource.list.map(function(item){
            
            if(key=='Co'){
                data=data.concat(item["avg"+key].toFixed(3))
            }else{
                data=data.concat(parseInt(item["avg"+key]))
            }
            
        })
    }

    return data
  }
  initEcharts(key){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart-day-top'));
    if(key==undefined){
        key="So2"
    }
    // 绘制图表
    myChart.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:[]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : this.xAxis()
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:key.toUpperCase(),
                    type:'bar',
                    data:this.series(key)
                }

            ]
        });
  }
  handleGasChange = (e) => {
    const key=e.target.value;
    this.setState({activeGas:key})
  };
  shouldComponentUpdate(nextProps,nextState){
   
      return nextProps.timestamp!=this.props.timestamp||nextState.activeGas!=this.state.activeGas
  }
  componentDidUpdate(){
      if(this.props.dataSource.list.length>0){
            this.initEcharts(this.state.activeGas)
          }
  }
  componentDidMount(){

      window.requestAnimationFrame(function() {
          if(this.props.dataSource.list.length>0){
            this.initEcharts(this.state.activeGas)
          }
      }.bind(this))
  }
  render(){

    const {activeGas}=this.state;
    if(this.props.dataSource.list.length==0){
        return (<Row gutter={24}></Row>)
    }
    return (
     <Row gutter={24}>
         <Row gutter={24} style={{textAlign:'center',marginBottom:20}}>
            <Radio.Group value={activeGas} onChange={this.handleGasChange}>
              <Radio.Button value="So2">SO2</Radio.Button>
              <Radio.Button value="No2">NO2</Radio.Button>
              <Radio.Button value="O3">O3</Radio.Button>
              <Radio.Button value="Co">CO</Radio.Button>
              <Radio.Button value="Pm10">PM10</Radio.Button>
              <Radio.Button value="Pm25">PM2.5</Radio.Button>
            </Radio.Group>
        </Row>
        <Row gutter={24}>
            <div id='chart-day-top' style={{width:'100%',height:'300px'}}></div>
        </Row>
      </Row>
    )
  }
}



chartMonthTop.propTypes = {

}

export default chartMonthTop
